<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本行的斑马条纹</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box {
            width: 200px;
            margin: 20px auto;
            padding: 30px;
            border: 1px solid black;
            line-height:1.5;
        }
        .back{
            background-image: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);
            background-size: auto 3em;
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>文本行的斑马条纹</h1>
        <ul>
            <li>
                用css中渐变直接生成背景图像，用em设置背景尺寸，这样就可以自动适应font-size的变化
            </li>
            <li>
                background-position:content box;设置开始的位置
            </li>
            <li>唯一的缺点就是在改变line-height的时候，需要改变background-size的大小</li>
        </ul>
        <div class="box  back">
            The beta version of the digital yuan wallet app went live on Apple's App Store and Android app stores on
            Tuesday, ready for the broad use by domestic and international customers during the upcoming Beijing Winter
            Olympics
        </div>
    </div>
</body>

</html>